<template>
  <div class="form-demo">
    <div class="demo-header">
      <h2 class="demo-title">表单组件</h2>
      <p class="demo-description">
        丰富的表单控件组件集合，包括输入框、选择器、日期选择、表单验证等功能
      </p>
    </div>

    <a-tabs v-model:activeKey="activeTab" class="demo-tabs">
      <a-tab-pane key="basic" tab="基础表单">
        <basic-form v-if="activeTab === 'basic'" />
      </a-tab-pane>

      <a-tab-pane key="advanced" tab="高级表单">
        <advanced-form v-if="activeTab === 'advanced'" />
      </a-tab-pane>

      <a-tab-pane key="validation" tab="表单验证">
        <form-validation v-if="activeTab === 'validation'" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import BasicForm from './basic.vue'
import AdvancedForm from './advanced.vue'
import FormValidation from './validation.vue'

const route = useRoute()
const router = useRouter()

const activeTab = ref('basic')

// 监听路由变化
watch(() => route.name, (newName) => {
  if (newName === 'BasicFormExample') {
    activeTab.value = 'basic'
  } else if (newName === 'AdvancedFormExample') {
    activeTab.value = 'advanced'
  } else if (newName === 'FormValidationExample') {
    activeTab.value = 'validation'
  }
}, { immediate: true })

// 监听标签页变化
watch(activeTab, (newTab) => {
  const routeMap = {
    'basic': 'BasicFormExample',
    'advanced': 'AdvancedFormExample',
    'validation': 'FormValidationExample'
  }

  const targetRoute = routeMap[newTab as keyof typeof routeMap]
  if (targetRoute && route.name !== targetRoute) {
    router.push({ name: targetRoute })
  }
})
</script>

<style scoped>
.form-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.demo-title {
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 12px 0;
}

.demo-description {
  font-size: 16px;
  color: #8c8c8c;
  margin: 0;
  line-height: 1.6;
}

.demo-tabs {
  background: white;
  border-radius: 8px;
}

:deep(.ant-tabs-nav) {
  margin-bottom: 24px;
}

:deep(.ant-tabs-tab) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.ant-tabs-content-holder) {
  padding: 0 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-header {
    margin-bottom: 24px;
  }

  .demo-title {
    font-size: 24px;
  }

  .demo-description {
    font-size: 14px;
  }

  :deep(.ant-tabs-tab) {
    font-size: 14px;
  }
}
</style>